<template>
  <div class="demo-drawer__content">
    <el-form
      ref="componentFrom"
      :model="form"
      label-width="70px"
      :disabled="isDisabled"
    >
      <el-form-item label="节点名称">
        <common-input v-model="form.name" placeholder="请输入"></common-input>
      </el-form-item>
      <el-form-item label="展示字段">
        <el-select
          v-model="form.group"
          placeholder="请选择"
          :popper-append-to-body="false"
          filterable
          clearable
        >
          <el-option
            v-for="(item, index) in fieldsList"
            :key="item.fieldName"
            :value="item.fieldName"
            :label="item.fieldName"
          >
            <span class="selectList">
              <common-marquee-text :content="item.fieldName" :fontSize="14">
              </common-marquee-text>
            </span>
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="统计维度">
        <el-select
          v-model="form.field"
          placeholder="请选择"
          :popper-append-to-body="false"
          filterable
          clearable
        >
          <el-option
            v-for="(item, index) in fieldsList"
            :key="item.fieldName"
            :value="item.fieldName"
            :label="item.fieldName"
          >
            <span class="selectList">
              <common-marquee-text :content="item.fieldName" :fontSize="14">
              </common-marquee-text>
            </span>
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="统计字段">
        <el-select
          v-model="form.value"
          placeholder="请选择"
          :popper-append-to-body="false"
          filterable
          clearable
        >
          <el-option
            v-for="(item, index) in fieldsListForNumber"
            :key="item.fieldName"
            :value="item.fieldName"
            :label="item.fieldName"
          >
            <span class="selectList">
              <common-carousel-text
                :content="item.fieldName"
                :index="index"
                :fontSize="14"
              >
              </common-carousel-text>
            </span>
          </el-option>
        </el-select>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import { _deepClone } from "@/utils";
import { executeChain } from "@/api/screenConfig/dataSet";

const numberType = [
  "tinyint",
  "smallint",
  "mediumint",
  "int",
  "integer",
  "bigint",
  "float",
  "double",
  "decimal",
  "number",
  "real",
  "bit",
  "numberic",
  "binary_float",
  "binary_double",
];

export default {
  name: "RowToCellConfig",
  props: {
    option: {
      type: Object,
      default: () => {},
    },
    dataSourceList: {
      type: Array,
      default: () => [],
    }, //数据源列表
    isDisabled: {
      type: Boolean,
      default: () => false,
    }, //是否可编辑
    nodeDataTemp: {
      type: Array,
      default: () => [],
    }, //当前节点之前所有节点集合
  },
  data() {
    return {
      indexPrefix: "",
      form: {
        name: null,
        group: null,
        field: null,
        value: null,
      },
      fieldsList: [],
      tempParams: null,
    };
  },
  watch: {
    option: {
      handler: function (val) {
        Reflect.ownKeys(this.form).forEach((k) => (this.form[k] = val[k]));
      },
      deep: true,
      immediate: true,
    },
    form: {
      handler: function (val, newVal) {
        let complete = Object.values(val).every((item) => !!item);
        this.$emit("changeForm", val, complete);
      },
      deep: true,
    },
  },
  computed: {
    fieldsListForNumber() {
      return this.fieldsList.filter(
        (item) =>
          item.fieldType && numberType.includes(item.fieldType.toLowerCase())
      );
    },
  },
  methods: {
    initData() {
      if (this.tempParams !== JSON.stringify(this.nodeDataTemp))
        this.executeChain();
    },
    executeChain() {
      executeChain({ node: JSON.stringify(this.nodeDataTemp) })
        .then((res) => {
          if (res && res.code === 200) {
            this.fieldsList = res.data?.fieldList;
          } else {
            this.fieldsList = [];
          }
        })
        .catch(() => (this.fieldsList = []));
    },
  },
  mounted() {},
};
</script>

<style scoped lang="scss">
.demo-drawer__content {
  padding: 0 16px 16px 16px;
  overflow-y: scroll;

  .esField {
    display: flex;
    justify-content: space-between;
    width: calc(100% - 55px);
  }

  .el-form {
    .form-item-flex {
      display: flex;
      justify-content: space-between;

      .el-select {
        width: 49%;
      }
    }

    ::v-deep
      .el-form-item.is-required:not(.is-no-asterisk)
      > .el-form-item__label:before {
      content: "";
    }
  }
}

::v-deep .el-select-dropdown {
  width: 220px;

  .selectList {
    height: 34px;
    display: flex;
    align-items: center;
    width: 100%;
    box-sizing: border-box;

    .carousel-text-warp {
      width: 100%;
    }
  }
}
</style>
